<!--
 * @Author: boyyang
 * @Date: 2022-02-03 13:40:17
 * @LastEditTime: 2022-02-05 14:06:22
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\chatRoomRight.vue
-->
<template>
    <div class="chat-room-right">
        <chat-room-right-title :groupMes="groupMes" @iconClick="iconClick"></chat-room-right-title>
        <chat-room-right-content :messageList="props.messageList"></chat-room-right-content>
        <chat-room-right-input @submit="submit" :is-clear="props.isClear" @onChange="onChange"></chat-room-right-input>
    </div>
</template>

<script lang="ts" setup>
import chatRoomRightTitle from './chatRoomRightTitle.vue'
import chatRoomRightContent from './chatRoomRightContent.vue'
import chatRoomRightInput from './chatRoomRightInput.vue'

interface IMessageProps {
    messageList?: any[];
    isClear?: boolean;
    groupMes?: any;
}


interface IChatRoomRightInputEmits {
    (e: 'submit', str: string): void;
    (e: 'onChange', mes: any): void;
    (e: 'iconClick'): void
}

const props = withDefaults(defineProps<IMessageProps>(), {})
const emits = defineEmits<IChatRoomRightInputEmits>()


const submit = (e: string) => {
    emits('submit', e)

}

const onChange = (e: any) => {
    emits('onChange', e)
}

const iconClick = () => {
    emits('iconClick')
}

</script>

<style scoped lang="scss">
.chat-room-right {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #6b6882;
    position: relative;
    overflow: hidden;
}
</style>